<template>
	<view class="bindCard">
		<navBar title="绑定银行卡" isBack backColor="#fff" color="#fff" background="#333333"></navBar>
		<view class="bindList">
			<span>用户名</span>
			<input type="text" value="" v-model="account_name" placeholder-class="bindC" placeholder="请输入户名" />
		</view>
		<view class="bindList" @click="toSelectType">
			<span>银行卡类型</span>
			<input type="text" value="" disabled v-model="typeName" placeholder-class="bindC" placeholder="请选择银行卡类型" />
		</view>
		<view class="bindList">
			<span>银行卡号</span>
			<input type="text" value="" v-model="bank_account" placeholder-class="bindC" placeholder="请输入银行卡号" />
		</view>
		<view class="bindList" @click="toSelectBanK">
			<span>卡名称</span>
			<input type="text" value="" v-model="bankInfo.bank_name" disabled placeholder-class="bindC" placeholder="请选择开户行"/>
		</view>
		<view class="bindList">
			<span>支行名称</span>
			<input type="text" value="" v-model="bank_zh_name" placeholder-class="bindC" placeholder="输入支行名称" />
		</view>
		<view class="bindList">
			<span>手机号码</span>
			<input type="text" value="" v-model="mobile" placeholder-class="bindC" placeholder="请输入银行预留手机号码" />
		</view>
		<template v-if="!bankImg">
			<view class="bankImg notImg" @click="uploadFN">
				<u-icon style="margin-bottom: 20rpx;" name="plus" size="50"></u-icon>
				银行卡正面照
			</view>
		</template>
		<template v-else>
			<view class="bankImg">
				<image class="bankImg" :src="bankImg" mode=""></image>
				<image class="delImg" @click="delImg" :src="`${baseImg}/static/adminShop/delImg.png`" mode=""></image>
			</view>
		</template>
		<view class="btnReady">
			<view class="radio_big">
				<radio value="" />
				<view>我已阅读并同意<span>《融易装平台协议》</span></view>
			</view>
			<view class="nextBtn" @click="toSubmit">
				<button type="default">下一步</button>
			</view>
		</view>
		<u-select v-model="showType" @confirm="confirm" :list="list"></u-select>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import URL from '@/config/url.js'
	import service_distri from '@/service/distri.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				bankInfo:{
					bank_id:null,
					bank_name:''
				},
				account_name:'',
				mobile:'',
				bank_zh_name:'',
				bank_account:'',
				showType:false,
				list:[{
					value: '1',
					label: '储蓄卡'
				},
				{
					value: '2',
					label: '信用卡'
				}],
				typeVale:'',
				typeName:'',
				level:null,
				bankImg:'',
				bankImg_id:null
			}
		},
		onLoad(options) {
			this.level = options.level
		},
		methods:{
			toSelectBanK(){
				uni.navigateTo({
					url:'choiceBank'
				})
			},
			// 选择卡类型
			toSelectType(){
				this.showType = true
			},
			// 选择类型成功
			confirm(e){
				console.log(e,'选择类型')
				this.typeName=e[0].label
				this.typeVale=e[0].value
			},
			// 下一步按钮
			toSubmit(){
				let params = {
					bank_id:this.bankInfo.bank_id,
					bank_account:this.bank_account,
					mobile:this.mobile,
					account_name:this.account_name,
					bank_zh_name:this.bank_zh_name,
					level:this.level,
					bank_img:this.bankImg_id
				}
				console.log(params,'绑定数据')
				service_distri.toBinkCard(params).then(res=>{
					console.log(res,'下一步结果')
					if(res.code==1){
						uni.navigateTo({
							url:`inputCode?mobile=${this.mobile}&card_id=${res.data.bank.card_id}`
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			// 删除图片
			delImg(){
				this.bankImg = ''
				this.bankImg_id = null
			},
			// 上传银行卡图片
			uploadFN(){
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_IMAGE,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									this.bankImg = data.data.url,
									this.bankImg_id = data.data.id
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bindCard{
		padding-top: 40rpx;
		margin-bottom: 200rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.bindList{
			margin: 0 auto 24rpx;
			width: 702rpx;
			height: 114rpx;
			border-radius: 8rpx;
			background-color: #fff;
			display: flex;
			color: #333333;
			align-items: center;
			font: 400 28rpx/40rpx PingFang SC;
			span{font-weight: 550; width: 232rpx;border-right: 2rpx solid #E5DECA;text-align: center;margin-right: 40rpx;}
			/deep/.bindC{color: #939393;font: 400 28rpx/40rpx PingFang SC;}
		}
		.bankImg{
			background-color: #fff;
			width: 702rpx;
			border-radius: 16rpx;
			height: 350rpx;
			margin: 24rpx auto 0;
			position: relative;
			.delImg{
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}
		.notImg{
			display: flex;
			text-align: center;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		}
		.btnReady{
			width: 100%;
			background-color: #fff;
			position: fixed;
			display: flex;
			flex-direction: column;
			align-items: center;
			bottom: 0;
			font: 400 24rpx/34rpx PingFang SC;
			.radio_big{
				radio{transform: scale(0.7);}
				display: flex;
				align-items: center;
				color: #333333;
				span{color: #E9423E;}
			}
			.nextBtn{
				height: calc(124rpx+ constant(safe-area-inset-bottom));
				height: calc(124rpx + env(safe-area-inset-bottom));
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				button{
					margin: 20rpx auto;
					width: 664rpx;
					font: 400 24rpx/84rpx PingFang SC;
					height: 84rpx;
					background-color: #E5B35E;
					border-radius: 12rpx;
					color: #fff;
				}
			}
		}
		
	}
</style>
